<template>
  <div class="app-container">
    <div>
      <el-select
        v-model="baseId"
        placeholder="请选择"
        class="select"
        @change="handleChange"
      >
        <el-option
          v-for="item in baseOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button
        style="float:right;"
        type="primary"
        icon="el-icon-plus"
        :disabled="addFlag"
        @click="routePages({siteId: placeQueryList.siteId, placeIds}, '/place/create')"
      >新增地块</el-button>
    </div>
    <my-table
      :places="placeList"
      :list-loading="listLoading"
      @modify="handleModify"
      @remove="deleteDate"
    />
    <my-dialog
      :temp="temp"
      :dialog-form-visible="dialogFormVisible"
      @modified-data="modifiedData"
    />
  </div>
</template>

<script>
import { queryBase } from '@/api/base'
import { queryPlace, updatePlace, delPlace, delPlaceLocation } from '@/api/place'
import store from '@/store'
import MyTable from './components/MyTable'
import MyDialog from './components/MyDialog'

export default {
  name: 'PlaceItem',
  components: {
    MyTable,
    MyDialog
  },
  data() {
    return {
      baseId: 0,
      listLoading: true,
      placeQueryList: {
        placeId: -1,
        siteId: -1,
        limit: -1,
        pageNumber: 0,
        type: ''
      },
      placeIds: '',
      placeList: [],
      temp: {
      },
      baseQueryList: {
        account: store.getters.token
      },
      baseOptions: [],
      dialogFormVisible: false
    }
  },
  computed: {
    addFlag() {
      return this.baseOptions[0].value === 0
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      queryBase(this.baseQueryList)
        .then(response => {
          const base = response.plantation
          this.baseOptions = base.map(item => {
            return {
              label: item.siteName,
              value: item.siteId
            }
          })
          if (this.baseOptions.length === 0) {
            this.baseOptions.push({
              label: '暂无基地',
              value: 0
            })
          }
          this.baseId = this.baseOptions[0].value
          if (this.baseId !== 0) {
            this.placeQueryList.siteId = this.baseId
            this.getPlace()
          }
          this.listLoading = false
        })
        .catch(error => {
          console.log(error)
        })
    },
    getPlace() {
      queryPlace(this.placeQueryList)
        .then(response => {
          this.placeList = response.places.reverse()
          if (response.places.length !== 0) {
            this.placeIds = (this.placeList.map(item => {
              return item.placeId
            })).join(',')
          } else {
            this.placeIds = 'NO_PLACE'
          }
          setTimeout(() => {
            this.listLoading = false
          }, 0.5 * 1000)
        })
        .catch(error => {
          console.log(error)
        })
    },
    handleChange(baseId) {
      this.listLoading = true
      this.placeQueryList.siteId = baseId
      this.getPlace()
    },
    handleModify(row) {
      // this.temp = Object.assign({}, row)
      this.dialogFormVisible = true
      this.temp = {
        placeName: row.placeName,
        placeId: row.placeId,
        produce: row.crop
      }
    },
    modifiedData() {
      updatePlace(this.temp)
        .then(() => {
          const temp = this.temp
          temp.crop = this.temp.produce
          const index = this.placeList.findIndex(v => v.placeId === temp.placeId)
          this.placeList.splice(index, 1, temp)
          this.dialogFormVisible = false
          this.$notify({
            title: '恭喜',
            message: '地块信息修改成功！',
            type: 'success',
            duration: 2000
          })
        })
    },
    deleteDate(placeId) {
      delPlace({ placeId })
        .then(response => {
          const index = this.placeList.findIndex(v => v.placeId === placeId)
          this.placeList.splice(index, 1)
          const placeIdsArr = this.placeIds.split(',')
          const placeId_index = placeIdsArr.findIndex(item => Number.parseInt(item) === placeId)
          console.log(placeId_index)
          placeIdsArr.splice(placeId_index, 1)
          this.placeIds = placeIdsArr.join(',')
          this.delPlaceLocation(placeId)
          this.$notify({
            title: '提示',
            message: '删除成功！',
            type: 'success',
            duration: 2000
          })
        })
        .catch(error => {
          this.$notify({
            title: '提示',
            message: '删除失败！',
            type: 'error',
            duration: 2000
          })
          console.log(error)
        })
    },
    delPlaceLocation(placeId) {
      delPlaceLocation({ id: placeId })
        .then(response => {
        })
        .catch(error => console.log(error))
    },
    routePages(query, url) {
      this.$router.push({
        path: url,
        query
      })
    }
  }
}
</script>

<style scoped>
.select {
  width: 500px;
  margin-bottom: 25px;
}
</style>
